<template>
  <div class="app">
    <el-main>
      <div class="container">
        <div class="status-bar">
          <div class="status-group">
            <!--            状态区-->
            <div
              v-for="(status, index) in state.TagStatuses"
              :key="index"
              :class="{ active: activeIndex === index }"
              @click="handleStatusClick(index)"
              class="status-item"
            >
              <div :style="getStatusStyle(index)">
                <div v-if="index===0">
                  {{status.label}}
                </div>
                <div v-if="index===1">
                  {{ status.label }}
                </div>
                <div v-if="index===2">
                  {{ status.label }}
                </div>
              </div>
              <div v-if="index < state.TagStatuses.length - 1" class="separator"></div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="activeIndex === 0">
        <!-- 意向报表 -->
        <div style="margin-bottom: 10px">
          日期 <el-date-picker v-model="state.requestBody.selectedDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
        </div>
        <el-button @click="getData(state.requestBody)">查询</el-button>
        <el-table :data="state.data" :summary-method="getSummaries" show-summary style="margin-top: 20px">
          <el-table-column label="日期" :width="120" prop="date"></el-table-column>
          <el-table-column label="已拨打客户数" :width="120" prop="calledConsumerNum"></el-table-column>
          <el-table-column label="已接听客户数" :width="120" prop="answeredConsumerNum"></el-table-column>
          <el-table-column label="客户接听率" :width="120" prop="answeredConsumerPercent"></el-table-column>
          <el-table-column label="首节点留存数" :width="120" prop="firstNodeNum"></el-table-column>
          <el-table-column label="A类意向" :width="100" prop="CategoryAIntentionNum"></el-table-column>
          <el-table-column label="B类意向" :width="100" prop="CategoryBIntentionNum"></el-table-column>
          <el-table-column label="C类意向" :width="100" prop="CategoryCIntentionNum"></el-table-column>
          <el-table-column label="D类意向" :width="100" prop="CategoryDIntentionNum"></el-table-column>
          <el-table-column label="E类意向" :width="100" prop="CategoryEIntentionNum"></el-table-column>
          <el-table-column label="无意向数" :width="120" prop="noneIntentionNum"></el-table-column>
          <el-table-column label="短信发送数" :width="130" prop="sentEmailNum"></el-table-column>
          <el-table-column label="平均通话时长" :width="140" prop="averageCallTime" :formatter="formatWithUnit('分钟')"></el-table-column>
          <el-table-column label="计费总时长" :width="120" prop="billingTotalTime" :formatter="formatWithUnit('分钟')"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="getData(state.requestBody)"
          @current-change="getData(state.requestBody)"
          :current-page="state.requestBody.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="state.requestBody.pageSize"
          :total="state.total"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>

      <div v-else-if="activeIndex === 1">
        数据分析
      </div>

    </el-main>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";

const state = reactive({
  TagStatuses : [
    { label: '意向报表' },
    { label: '数据分析' }
  ],
  data: [],
  requestBody: {
    pageNum: 1,
    pageSize: 10,
    selectedDate: ref('')
  },
  total: 0
})
const activeIndex = ref(0)
//筛选状态信息
const handleStatusClick = (index) => {
  activeIndex.value = index
}
//动态渲染当前选中的状态
const getStatusStyle = (index) => ({
  color: activeIndex.value === index ? 'blue' : 'black',
  marginLeft: '30px',
  marginRight: '30px',
})

//格式化展示数据
const formatWithUnit = (unit) => {
  return (row, column, cellValue) => {
    if (typeof cellValue === 'number' || typeof cellValue === 'string') {
      return `${cellValue}${unit}`;
    }
    return `N/A ${unit}`;
  };
};

//  获取数据
const getData = (requestBody) => {
  console.log(requestBody, 'requestBody')
  state.requestBody.pageNum = 1
  state.requestBody.pageSize = 10
  const respDataList = [
    {
      date: "2022-04-21",
      calledConsumerNum: 8,
      answeredConsumerNum: 2,
      firstNodeNum: 0,
      CategoryAIntentionNum: 0,
      CategoryBIntentionNum: 0,
      CategoryCIntentionNum: 0,
      CategoryDIntentionNum: 0,
      CategoryEIntentionNum: 0,
      noneIntentionNum: 0,
      sentEmailNum: 0,
      averageCallTime: 0,
      billingTotalTime: 0
    },
    {
      date: "2022-04-22",
      calledConsumerNum: 8,
      answeredConsumerNum: 2,
      firstNodeNum: 1,
      CategoryAIntentionNum: 1,
      CategoryBIntentionNum: 1,
      CategoryCIntentionNum: 1,
      CategoryDIntentionNum: 1,
      CategoryEIntentionNum: 1,
      noneIntentionNum: 1,
      sentEmailNum: 1,
      averageCallTime: 1,
      billingTotalTime: 1
    },
  ]
  state.total = 2

  for (let i = 0; i < respDataList.length; i++) {
    if (respDataList[i].calledConsumerNum != 0) {
      respDataList[i].answeredConsumerPercent = respDataList[i].answeredConsumerNum / respDataList[i].calledConsumerNum
    }
  }
  state.data = respDataList
}
getData(state.requestBody)

// 计算表尾合计行
const getSummaries = (param) => {
  const { columns, data } = param
  const sums: string[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = 'N/A'
    }
  })

  sums[3] = Number(sums[2]) / Number(sums[1]) + ''
  sums[12] = sums[12] + '分钟'
  sums[13] = sums[13] + '分钟'

  return sums
}

</script>

<style>
.headerBg {
  background: #eee!important;
}
.box {
  background-color: #f1f1f1; /* 背景颜色 */
  border: 1px solid #ffffff; /* 边框，1px 宽，白色 */
  padding: 10px; /* 可选：添加内边距，以便使边框更明显 */
}
.actions-column {
  width: 200px;
}
.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow:0px 10px 10px -15px #000;
}
.status-bar {
  margin-left: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.status-group {
  display: flex;
  align-items: center;
}
.status-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.separator {
  width: 1px;
  height: 25px;
  background-color: #ccc;
  margin: 0 5px;
}
.button-column {
  margin-right: 15px;
}
.custom-form .el-form-item {
  margin-bottom: 4px; /* 设置每行的下边距为 3px */
}

</style>
